/* 
1 用户上滑页面 滚动条触底 开始加载下一页数据
  1.1 找到滚动条触底事件 微信小程序官方开发文档寻找
  1.2 还有没有下一页数据
    1.2.1 获取到总页数 只有总条数
      总页数 = Math.ceil(总条数 / 页容量 - pagesize)
      总页数 = Math.ceil(23/10)
    1.2.2 获取到当前的页码 pagenum
    1.2.3 判断一下 当下的页码是否大于等于 总页数
      1.2.3.1 大于或等于总页数 表示 没有下一页数据
      1.2.3.2 
  1.3 假如没有下一页数据, 弹出一个提示
  1.4 假如还有下一页数据, 来加载下一页数据
    1.4.1 当前的页码 ++
    1.4.2 重新发送请求
    1.4.3 数据请求回来 要对data中的数组 进行 拼接 而不是全部替换!!!
*/

/**
 * 2   下拉刷新页面
 * 2.1 触发下拉刷新事件 需要在页面的json文件中开启一个配置项 
       找到 触发下拉刷新的事件
 * 2.2 重置 数据 数组
 * 2.3 数据页码 设置为1 初始化页码
 * 2.4 重新发送请求
 * 2.5 数据请求回来 需要手动的关闭 等待效果
 */
import {
  request
} from "../../request/index.js";
import regeneratorRuntime from '../../lib/runtime/runtime';
// pages/goods_list/index.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    tabs: [
      {
        id: 0,
        value: "综合",
        isActive: true
      },
      {
        id: 1,
        value: "销量",
        isActive: false
      },
      {
        id: 2,
        value: "价格",
        isActive: false
      },
    ],
    // 在data配置项里面定义一个空数组
    goodsList: [],
  },
  /*
   1 接口要的参数:配置项
   2 需要传递参数和数据进入源数据, 
   */
  QueryParams: {
    query: "",
    /*
    1 在category页面传递参数cid到goods_list: url="/pages/goods_list/index?cid={{item2.cat_id}}
    2 一加载页面,就会传递参数cid
    3 this.QueryParams.cid = options.cid onLoad()加载传过来了
    */
    cid: "",
    // 当前页码
    /* 
    1 this.QueryParams.pagenum++;
    2 pagenum 当前页码
    3 向网络请求端传入不同数据后(不同onload就有的cid和pagenum++,以及query(option)),网络api会返回对应的不同源数据total,array[]
    */
    pagenum: 1,
    pagesize: 10
  },
  // 总页数 看做全局参数
  // 总页数 看做全局参数
  totalPages: 1,
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    // 为了获取点击cagegory页面获取cid参数,打印options {cid: "5"}
    console.log(options)
    // goods_list: url="/pages/goods_list/index?cid={{item2.cat_id}}
    this.QueryParams.cid = options.cid||"";
    this.QueryParams.query = options.query||"";
    // 然后在onload里面调用这个方法
    this.getGoodsList();
    console.log("this.data.goodsList:"+this.data.goodsList)

    // 做测试: 加载中和关闭做测试
    /* wx.showLoading({
      title: '加载中',
    })

    setTimeout(function () {
      wx.hideLoading()
      // 1000 = 1 second
    }, 5000) */

  },
  /* 标题点击事件 从子组件传递过来
  1 bindtabsItemChange=""适用于绑定在写在父组件的子组件标签上: {index} = e.detail 
  2 绑定在其它非子组件的bind:tap ="" / bindtap="" : const {index}=e.currentTarget.dataset;
  */

  /* 
  1 获取商品列表数据
  2 传递一个形参参数, alternative
  */
  // async getGoodsList() {
  async getGoodsList(QueryParams) {
    /* 
    1 重新将this.QueryParams赋值给data配置项?
    2 第一次pagenum为1, 数据goodsList就是第一个商品列表页面循环渲染
    */
    const res = await request({ url: "/goods/search", data: this.QueryParams });
    // const res = await request({ url: "/goods/search"});
    // 获取 total总条数 23  
    // {total:23,pagenum:"1", goods:Array(10)}
    console.log(res) 
    // 获取 total总条数 23 就是后台返回的数据 网络请求返回就有的数据
    const total = res.total;
    /* 
    1 成功的话,打印一下返回值
    2 console.log(res);
    3 totalPages是全局参数 3
    4 total是当前函数定义的常量const 23
    */
    this.totalPages = Math.ceil(total / this.QueryParams.pagesize);
    // 3
    console.log(this.totalPages);
    this.setData({
      // 打印数据源res的goods数组
      // goodsList: res.goods
      // 先把旧数组结构出来,再把新的结构出来的数组结构出来
      goodsList: [...this.data.goodsList, ...res.goods]
    })
    // (10) [{,,,,},10]
    console.log("this.data.goodsList:"+this.data.goodsList)
    // 关闭下拉刷新的窗口 如果没有调用下拉刷新的窗口 直接关闭stopPullDownRefresh()也不会报错(第一次打开页面没有触发下拉刷新,关掉stopPullDownRefresh也不会影响)
    wx.stopPullDownRefresh();
  },

  handleTabsItemChange(e) {
    // console.log(e)
    // 1 获取被点击的标题索引
    const { index } = e.detail;
    // 2 修改源数组 (产生一个激活选中效果)
    let { tabs } = this.data;
    // 索引是几,就表示tabs数组下标对应元素的isActive属性为真, 否则数组对应的其它下标元素都为false
    tabs.forEach((v, i) => i === index ? v.isActive = true : v.isActive = false)
    // 3 赋值到data中
    this.setData({
      // 定义了一个变量数据源{tabs}, 点击不同tabs,会有不同的数据源
      tabs
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   * 下拉刷新事件
   */
  onPullDownRefresh() {
    // 手动控制回弹 alternatively we can place it within function of this.getGoodsList();
    // wx.stopPullDownRefresh();
    // test refresh
    // console.log("刷新")
    // 1 重置数组
    this.setData({
      // 清空以前数据: goodsList: [...this.data.goodsList, ...res.goods]
      goodsList: []
    })
    // 2 重置页码
    this.QueryParams.pagenum = 1;
    // 3 发送请求
    this.getGoodsList();
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    // console.log("页面触底")
    /* 
    1 判断还有没有下一页数据
    2 触底以后,就执行选择结构/流程语句
    3 this.totalPages = 3, 已经计算出来了的,方法传递给参数
    */
    console.log(this.totalPages)
    //  大于等于totalPages 3, 那么就没有下一页
    if (this.QueryParams.pagenum >= this.totalPages) {
      // 没有下一页数据
      // console.log("没有下一页数据")
      wx.showToast({
        title: '没有下一页数据'
      });
    } else {
      // 还有下一页数据
      console.log("有下一页数据")
      /* 
      1 this.QueryParams.pagenum=+3;
      2 if pagenum over 4, then there still have array, while there is no data/elements within the array;
      */
      // +
      // this.QueryParams.pagenum+=3;
      this.QueryParams.pagenum++;
      this.getGoodsList();
    }
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})